<template>
  <n-layout class="px-5 pb-5 pt-2 h-full" :native-scrollbar="false">
    <n-tabs
        @update:value="onTabChange"
        @close="onTabClose"
        :value="route.name"
        type="card"
        size="small"
        animated
        closable>
      <n-tab
          class="mb-2"
          v-for="route in systemStore.routerHistory"
          :name="route.name"
          :key="route.name">
        <n-space>
          <component :is="route.icon"/>
          <n-text>{{ route.title }}</n-text>
        </n-space>
      </n-tab>
    </n-tabs>
    <n-scrollbar style="position: absolute; top: 60px; bottom: 0">
      <slot />
    </n-scrollbar>
  </n-layout>
</template>

<script setup>
import {NLayout, NSpace, NTab, NTabs, NText} from "naive-ui";
import {useSystemStore} from "../../store/system/index.js";
import {useRoute, useRouter} from "vue-router";

const systemStore = useSystemStore()
const route = useRoute()
const router = useRouter()
const onTabChange = (val) => {
  router.push({name: val})
}
const onTabClose = (val) => {
  if (systemStore.routerHistory.length === 1) {
    router.push({name: 'Home'})
    systemStore.removeAt(0)
    return
  }
  const index = systemStore.routerHistory.findIndex(item => item.name === val)
  let nextIndex = index
  if (index === 0) {
    nextIndex++
  } else {
    nextIndex--
  }
  const route = systemStore.routerHistory[nextIndex]
  router.push({name: route.name})
  systemStore.removeAt(index)
}
</script>

<style scoped>

</style>
